<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 顶部用户信息区域 -->
    <div class="user-header bg-[#0097FF] h-40vw flex flex-col justify-center items-center relative">
      <!-- 用户头像 -->
      <div class="user-avatar w-25vw h-25vw rounded-full bg-white flex items-center justify-center overflow-hidden">
        <i class="fa fa-user text-10vw text-gray-400"></i>
      </div>

      <!-- 用户信息 -->
      <div class="user-info text-center mt-4vw">
        <p v-if="isLoggedIn" class="text-4.5vw text-white font-bold">{{ userName }}</p>
        <p v-else class="text-4.5vw text-white font-bold">未登录</p>
        <p v-if="isLoggedIn" class="text-3.5vw text-white mt-1vw">手机号: {{ phoneNumber }}</p>
      </div>

      <!-- 登录/注册按钮 -->
      <div v-if="!isLoggedIn" class="login-buttons flex justify-center mt-4vw">
        <button
            class="bg-white text-[#0097FF] text-4vw font-bold py-2vw px-8vw rounded-2vw mr-4vw"
            @click="goToLogin"
        >
          登录
        </button>
        <button
            class="bg-transparent border border-white text-white text-4vw font-bold py-2vw px-8vw rounded-2vw"
            @click="goToRegister"
        >
          注册
        </button>
      </div>
    </div>

    <!-- 功能区域 -->
    <div class="features bg-white mt-4vw rounded-2vw overflow-hidden">
      <!-- 我的订单 -->
      <div class="feature-item flex justify-between items-center p-4vw border-b border-gray-200" @click="goToOrderList">
        <div class="flex items-center">
          <i class="fa fa-file-text-o text-5vw text-[#0097FF] mr-3vw"></i>
          <span class="text-4vw text-gray-700">我的订单</span>
        </div>
        <i class="fa fa-angle-right text-4vw text-gray-400"></i>
      </div>



      <!-- 客服中心 -->
      <div class="feature-item flex justify-between items-center p-4vw border-b border-gray-200" @click="contactService">
        <div class="flex items-center">
          <i class="fa fa-headphones text-5vw text-[#38CA73] mr-3vw"></i>
          <span class="text-4vw text-gray-700">客服中心</span>
        </div>
        <i class="fa fa-angle-right text-4vw text-gray-400"></i>
      </div>

      <!-- 设置 -->
      <div class="feature-item flex justify-between items-center p-4vw" @click="goToSettings">
        <div class="flex items-center">
          <i class="fa fa-cog text-5vw text-gray-500 mr-3vw"></i>
          <span class="text-4vw text-gray-700">设置</span>
        </div>
        <i class="fa fa-angle-right text-4vw text-gray-400"></i>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div v-if="isLoggedIn" class="logout-btn mt-8vw flex justify-center">
      <button
          class="bg-[#FF4444] text-white text-4.5vw font-bold py-3vw px-12vw rounded-2vw"
          @click="logout"
      >
        退出登录
      </button>
    </div>

    <!-- 底部导航栏 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from '@/components/FooterNav.vue'

const router = useRouter()

// 用户状态
const isLoggedIn = ref(true)
const userName = ref('张三')
const phoneNumber = ref('138****5678')

// 跳转到登录页面
const goToLogin = () => {
  router.push({ name: 'Login' })
}

// 跳转到注册页面
const goToRegister = () => {
  router.push({ name: 'register' })
}

// 跳转到订单列表
const goToOrderList = () => {
  router.push({ name: 'oderList' })
}



// 联系客服
const contactService = () => {
  alert('联系客服：400-123-4567')
}

// 跳转到设置
const goToSettings = () => {
  alert('跳转到设置页面')
}

// 退出登录
const logout = () => {
  isLoggedIn.value = false
  alert('已退出登录')
}
</script>

<style scoped>
.user-header {
  position: relative;
}

.user-avatar {
  border: 0.5vw solid rgba(255, 255, 255, 0.5);
}

.feature-item {
  transition: background-color 0.2s;
}

.feature-item:active {
  background-color: #f5f5f5;
}
</style>
